/* eslint-disable no-use-before-define */
/**
 * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * defination
 */
import { inject } from 'vue';
import { onMounted } from 'vue';
import { ref } from 'vue';
import { onBeforeUnmount } from 'vue';
import { computed, defineComponent, SetupContext } from 'vue';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { MemoryVoiceProps, memoryVoiceProps } from '../memory-voice.props';

import '../memory-voice.scss';

export default defineComponent({
    name: 'FMemoryVoiceDesign',
    props: memoryVoiceProps,
    emits: [] as (string[] & ThisType<void>) | undefined,
    setup(props: MemoryVoiceProps, context: SetupContext) {

        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        const componentInstance = useDesignerComponent(elementRef, designItemContext);

        // let utterance: SpeechSynthesisUtterance;


        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;


            // speechSynthesis.addEventListener('voiceschanged', () => {
            //     const voices = speechSynthesis.getVoices();
            //     // 选择合适的语音合成器
            //     const voice = voices.find(v => v.name === 'Microsoft Yaoyao - Chinese (Simplified, PRC)');
            //     console.log(voices.filter(v => v.localService));
            //     if (utterance && voice) {
            //         utterance.voice = voice;
            //     }
            // });

        });
        // function synthesizeSpeech(payload: MouseEvent) {
        //     payload.preventDefault();
        //     payload.stopPropagation();
        //     if (window.SpeechSynthesisUtterance) {
        //         utterance = new SpeechSynthesisUtterance();
        //         utterance.text = '下列工程建设项目，包括项目的勘察、设计、施工、监理以及与工程建设有关的重要设备、材料等的采购，必须进行招标:（一）大型基础设施、公用事业等关系社会公共利益、公众安全的项目;（二）全部或者部分使用国有资金投资或者国家融资的项目（三）使用国际组织或者外国政府贷款、援助资金的项目。';
        //         utterance.lang = 'zh-CN';
        //         utterance.rate = 1.2;
        //         utterance.volume = 2;

        //         // utterance.addEventListener('end', () => {
        //         //     synthesizeSpeech(payload); // 在语音合成结束时重新调用方法，实现重复播放
        //         // });
        //         speechSynthesis.speak(utterance);
        //     }

        // }
        // function cancelSynthesizeSpeech() {
        //     speechSynthesis.cancel(); // 中断语音播放
        // }
        // onBeforeUnmount(() => {
        //     cancelSynthesizeSpeech();  // 在组件销毁前调用停止语音播放的方法
        // });

        context.expose(componentInstance.value);



        return () => {
            return (
                <div ref={elementRef} id="memory-voice" class="design-memory-voice">
                   <img src="assets/memory-voice/designer-memory-voice.png" style="width:100%;object-fit: cover;"></img>
                </div>
            );
        };
    }
});
